<template>
  <div>
    <div>
      <el-form :inline="true">
        <el-form-item prop="" label="搜索">
          <el-input />
        </el-form-item>
        <el-form-item prop="" label="搜索">
          <el-input />
        </el-form-item>
      </el-form>
    </div>
    <div>
      <span>您获得了 {{ table.total }} 个搜索或筛选结果</span>
    </div>
    <div>
      <el-table v-loading="table.loading" :data="table.data" border>
        <el-table-column prop="title" label="学生ID" />
        <el-table-column prop="title" label="姓名/昵称" />
        <el-table-column prop="title" label="班级" />
        <el-table-column prop="title" label="推荐专业类1" align="center">
          <template slot-scope="t">
            <i v-if="t.row" class="el-icon-success" style="color: rgba(25,137,250,1)" />
            <i class="el-icon-error" style="color: #C0C4CC" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="推荐专业类1" align="center">
          <template slot-scope="t">
            <i v-if="t.row" class="el-icon-success" style="color: rgba(25,137,250,1)" />
            <i class="el-icon-error" style="color: #C0C4CC" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="推荐专业类1" align="center">
          <template slot-scope="t">
            <i v-if="t.row" class="el-icon-success" style="color: rgba(25,137,250,1)" />
            <i class="el-icon-error" style="color: #C0C4CC" />
          </template>
        </el-table-column>
        <el-table-column label="最近推荐时间" align="center">
          <template slot-scope="s">
            <span>{{ s.row.create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="t">
            <el-button type="text" @click="handleViewReport(t)">查看最近报告</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <WrapPagination>
      <div>
        <el-pagination
          class="pagination"
          :current-page="table.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </WrapPagination>
    <div>
      <el-dialog :visible.sync="visibleReport" title="报告详情" width="80%" @close="handleCloseReportDialog">
        <div style="border-bottom: 1px solid #F2F6FC" />
        <div>
          <div>学生信息</div>
          <el-row :gutter="20">
            <el-col>学生ID 2348</el-col>
            <el-col>学生ID 2348</el-col>
            <el-col>学生ID 2348</el-col>
            <el-col>学生ID 2348</el-col>
            <el-col>学生ID 2348</el-col>
          </el-row>
        </div>
        <div>
          <div>测试结果</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { TableMixin } from '../../components/mixin'
import { getList } from '../../api/school'
export default {
  name: 'CareerComplex',
  mixins: [TableMixin],
  data() {
    return {
      visibleReport: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      return this.wrapList(getList)
    },
    handleViewReport(t) {
      this.visibleReport = true
    },
    handleCloseReportDialog() {
      this.visibleReport = false
    }
  }
}
</script>

<style scoped>

</style>
